<template>
    <view class="container">
        <uni-nav-bar
            color="#000"
            status-bar
            :border="false"
            title="登录"
        />
        <view class="login-box">
            <image
                class="logo"
                src="@/static/logo.png"
                mode="aspectFit"
            />

            <view class="login-form">
                <view class="login-form-item">
                    <input
                        v-model="form.loginName"
                        class="login-input"
                        focus
                        placeholder="请输入用户名"
                    >
                </view>

                <view class="login-form-item">
                    <input
                        v-model="form.password"
                        class="login-input"
                        password
                        safe-password
                        placeholder="请输入密码"
                    >
                </view>

                <view class="login-form-item code-img">
                    <input
                        v-model="form.code"
                        class="login-input img-code-input"
                        placeholder="请输入验证码"
                    >
                    <image
                        class="code-img"
                        :src="imgCodeSrc"
                        mode="aspectFit"
                        @click="getCodeImg()"
                    />
                </view>

                <button
                    class="sign-button"
                    type="primary"
                    @click="login()"
                >
                    登录
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { onLoad, onShow } from '@dcloudio/uni-app';
    import { ref, reactive, inject } from 'vue';

    const toast = inject('$toast');
    const router = inject('$router');
    const api = inject('$api');
    const storage = inject('$storage');
    const encrypt = inject('$encrypt');

    let form = reactive({
        loginName: '13888888888',
        password: '1qaz@WSX123',
        platformType: 1,
        code: '',
        uuid: ''
    });

    let imgCodeSrc = ref('');

    let getCodeImg = () => {
        imgCodeSrc.value = '';
        form.uuid = '';
        api.getImgCode().then(res => {
            if (res.code == 10000) {
                imgCodeSrc.value = res.data.img;
                form.uuid = res.data.uuid;
            } else {
                toast(res.msg);
            }
        });
    };

    const login = async () => {
        if (!form.loginName) {
            toast('请输入用户名');
            return;
        }
        if (!form.password) {
            toast('请输入密码');
            return;
        }
        if (!form.code) {
            toast('请输入验证码');
            return;
        }
        let obj = JSON.parse(JSON.stringify(form));
        obj.loginName = encrypt.rsaEncrypt(obj.loginName);
        obj.password = encrypt.rsaEncrypt(obj.password);
        // debugger
        // 登录传signKey
        // obj.signKey = await encrypt.newSignKey();
        // signKey缓存
        // encrypt.saveSignKey(obj.signKey);
        
        // 登录接口
        // api.login(obj).then(res => {
        //     if (res.code == 10000) {
                // storage.set('token', res.data.token);
                storage.set('token', 1111111);
                router.go('/pages/demo/demo', 'reLaunch');
        //     } else {
        //         toast(res.msg);
        // //     }
        // });
    };

    onLoad(() => {

    });

    onShow(() => {
        getCodeImg();
    });
</script>

<style lang="less" scoped>
    .container{
        height: 100vh;
        background: #f8f8f8;
    }
    .logo{
        width: 144rpx;
        height: 144rpx;
        display: block;
        margin: 24rpx auto 60rpx;
    }
    .login-box{
        padding: 48rpx 48rpx 60rpx;
        margin: 40rpx 24rpx 0;
        background: #fff;
        border-radius: 16px;
    }
    .login-form{
        .login-form-item{
            padding: 0 50rpx;
            border-radius: 50rpx;
            border: 1px solid #E8EEF6;
            background: #F2F6FB;
            overflow: hidden;
            margin-bottom: 48rpx;
            .login-input{
                height: 100rpx;
                line-height: 100rpx;
            }
        }
        .code-img{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .img-code-input{
                width: calc(100% - 260rpx);
            }
            .code-img{
                width: 260rpx;
                height: 100rpx;
            }
        }
    }
</style>
